<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="../js/vue2-dev.js"></script>
    </head>
    <body>
        <div id="root">
            <p>遍历数组</p>
            <ul>
                <li v-for="(person,index) in persons" :key="index">
                    {{person.name}}--{{person.age}}
                </li>
            </ul>
            <p>遍历对象</p>
            <ul>
                <li v-for="(value, key) in personObj" :key="key">
                    {{key}}--{{value}}
                </li>
            </ul>
            <p>遍历字符串</p>
            <ul>
                <li v-for="(char,index) in 'hello'" :key="index">
                    {{index}}--{{char}}
                </li>
            </ul>
            <p>遍历数字</p>
            <ul>
                <li v-for="(num,index) in 5" :key="index">
                    {{index}}--{{num}}
                </li>
            </ul>
        </div>

        <script>
            const vm = new Vue({
                data() {
                    return {
                        persons: [
                            { name: "xuhu", age: 23 },
                            { name: "xuyawen", age: 4 },
                        ],
                        personObj: { name: "xuhu", age: 23 },
                    };
                },
            });

            vm.$mount("#root");
        </script>
    </body>
</html>
